<script setup lang="ts">
import { computed, ref } from 'vue'
import { useTodosStore } from '../../stores/todos'
import { useSystemStore } from '../../stores/system'
import TopBackground from '../../components/TopBackground.vue'
import TodoItem from './TodoItem.vue'
import FixedButton from '../../components/FixedButton.vue'

const todosStore = useTodosStore()
const systemStore = useSystemStore()

const calendarRef = ref<any>(null)

const setDay = (date: { fulldate: string }) => {
  todosStore.setDay(date.fulldate)
}

const setToToday = () => {
  calendarRef.value.backToday()
}

const todayTodos = computed(() => todosStore.todayTodos)

const navToAddTodo = () => {
	uni.navigateTo({
		url: '/pages/addTodo/addTodo'
	})
}

const navToEditTodo = (todo: Todo) => {
	uni.navigateTo({
		url: '/pages/editTodo/editTodo?todo=' + JSON.stringify(todo)
	})
}
</script>

<template>
	<view class="today-view" :style="systemStore.warrperStyle">
		<top-background />

		<view class="canlendar">
			<uni-calendar
				ref="calendarRef"
				@change="setDay"
				:insert="true"
				:lunar="true"
				:showMonth="false"
				:style="`
          :deep(.uni-calendar__header) {
            top: ${systemStore.statusBarHeight}px;
          }
        `"
			/>
		</view>

		<view class="todo-list" v-if="todayTodos.length > 0">
			<view class="todo-item" v-for="todo in todayTodos" :todo="todo" :key="todo.id" @click="navToEditTodo(todo)">
				<todo-item :todo="todo" />
			</view>
		</view>

		<view class="no-todo" v-else>
			<view class="completed-button" @click="navToAddTodo">
				添加Todo
			</view>
		</view>

		<view class="setToToday" v-if="!todosStore.isToday" @click="setToToday">
			<fixed-button text="今" :textStyle="{ color: '#339ca8' }" :position="{ bottom: '160rpx', right: '40rpx' }" />
		</view>

		<view class="add-todo" @click="navToAddTodo">
			<fixed-button :position="{ bottom: '40rpx', right: '40rpx' }">
				<template #default>
					<image src="../../static/icons/plus.png" alt="" />
				</template>
			</fixed-button>
		</view>
	</view>
</template>

<style scoped lang="scss">
.today-view {
	background-color: $uni-background;
	display: flex;
	flex-direction: column;

	.canlendar {
		margin: 0 30rpx 30rpx 30rpx;

		:deep(.uni-calendar__header) {
			position: fixed;
			width: 750rpx;
			background-color: $uni-background;
			z-index: 1000;
			display: flex;
			justify-content: left;

			.uni-calendar__backtoday {
				display: none;
			}
		}

		:deep(.uni-calendar__box) {
			margin-top: 50px;
		}
	}

	.todo-list {
		padding: 0 30rpx;
		overflow-y: auto;
		flex: 1;

		.todo-item:last-child {
			margin-bottom: 150rpx;
		}
	}

	.completed-button {
		margin: 0 30rpx;
		text-align: center;
		background-color: $uni-color-main;
		color: $uni-white;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.add-todo {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
</style>
